<!-- 分支节点 -->
<template>
        <div class="flow-serial-node-wrap">
            <Node :panelClass="warnClass" :nodeData="nodeData" :readonly="readonly" :backgroundImage="backgroundImage">
                <template v-slot:body="{nodeData}">
                    <slot name="body" :nodeData="nodeData"></slot>
                </template>
            </Node>
         
        </div>
</template>

<script setup>
import {ref, provide,defineProps,  toRefs, watch} from 'vue'
    import Node from '../node.vue'
    const props =  defineProps({
        nodeData:{},
        readonly: {
            type: Boolean,
            default: false
        },
    })
    const backgroundImage = ref("linear-gradient(to right, #7474BF 0%, #348AC7  51%, #7474BF  100%)")
    const {readonly, nodeData} = toRefs(props)
    console.log(readonly.value)
    const warnClass = ref("");
    watch( ()=> nodeData.value.value, (newV) => {
    if(newV == null || newV == undefined || newV.length == 0){
        warnClass.value = "flow-warn"
    }
    else {
        warnClass.value = "";
    }
},{
    immediate: true,
    deep: true
})

    provide('body', () => this.slotContent);
</script>

<style  scoped>
  
    .flow-serial-node-wrap{
        display: flex;
        overflow: visible;
        /* min-height: 180px; */
        height: auto;
        position: relative;
        padding-top: 35px;
        justify-content: center;
        background-color: var(--global-flow-background-color);
        min-width: 0;
    }
    .flow-serial-node-wrap::before{
        content: '';
        position: absolute;
        top: 0px;
        left: 50%;
        height: 35px;
        transform: translate(-50%, 0px);
        width: 1px;
        background-color: var(--global-flow-line-color);
        /* transform: translate(-50%, 0px); */
    }
 

    .flow-serial-node-last{
        text-align: center;
    }
 
</style>